@use '@angular/material' as mat;

@import "@angular/material/theming";
@import 'highlight.js/scss/base16/materia';

@include mat.core();

$angular-primary: mat.define-palette(mat.$blue-palette, 500, 100, 900);
$angular-accent: mat.define-palette(mat.$teal-palette, A400, A100, A700);
$angular-warn: mat.define-palette(mat.$orange-palette);

$angular-dark-theme: mat.define-dark-theme((
	color: (
		primary: $angular-primary,
		accent: $angular-accent,
		warn: $angular-warn,
	),
	density: -2,
));

$bottom-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

@include mat.all-component-themes($angular-dark-theme);

html, body {
	height: 100%;
}

body {
	margin: 0;
}

.mat-tooltip, .mat-select-panel, .mat-menu-panel {
	white-space: pre-line !important;
	background-color: rgba(30, 30, 30, 0.93);
	backdrop-filter: blur(1px);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

[hidden] {
	display: none !important;
}

.mat-drawer, .mat-sidenav {
	background-color: #303030;
}

.table {
	width: 100%;
	white-space: nowrap;
	border-spacing: 0px;
	background-color: transparent;
	font-family: 'Fira Sans', sans-serif !important;

	.mat-header-row {
		height: 45px;

		.mat-header-cell {
			color: mat.get-color-from-palette($angular-primary, default);
			font-size: 15px;
			border: none;

			input {
				width: 100%;
				margin: 0px;
			}

			&.resizeColumn:not(.mat-column---ACTION--) {
				resize: horizontal;
				overflow-y: hidden;
				overflow-x: auto;

				&::-webkit-resizer {
					border-width: 0px;
				}
			}
		}
	}

	.mat-column---ACTION-- {
		width: 0px !important;
		min-width: 0px !important;
	}

	.mat-cell, .mat-header-cell {
		min-width: 60px;
		padding: 0px 10px !important;
	}

	.mat-cell {
		border-left: 1px solid #1e1e1e;
		border-bottom: none;
	}

	.mat-checkbox {
		margin: 0px 8px;
	}

	.mat-row:nth-child(even) {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.mat-table-sticky {
		background-color: rgba(30, 30, 30, 0.95) !important;
		box-shadow: $bottom-shadow;
	}

	tbody {
		.mat-icon-button, .mat-checkbox {
			opacity: 0.3;
		}

		.mat-row {
			height: 32px;
		}

		.mat-row:hover .mat-cell, .mat-cell.selected-row, .mat-cell.selected-cell {
			.mat-icon-button, .mat-checkbox {
				opacity: 1;
			}
		}

		.mat-row:hover {
			background-color: #1e1e1e;
		}

		.mat-cell.selected-row {
			background-color: rgba(33, 150, 243, 0.3);
		}

		.mat-cell.selected-cell:not(.mat-column---ACTION--) {
			box-shadow: inset 0px 0px 0px 1px #2196f3;
		}
	}
}

a {
	color: mat.get-color-from-palette($angular-accent, default);
}

.mat-bottom-sheet-container, .snack-error {
	color: white;
	background-color: #424242;
	border-top: 1px solid rgb(244, 67, 54);
	border-left: 1px solid rgb(244, 67, 54);
	border-right: 1px solid rgb(244, 67, 54);
	box-shadow: 0px 0px 8px rgb(244, 67, 54);
}

.mat-paginator {
	background-color: inherit;

	.mat-paginator-container {
		flex-direction: row-reverse;

		.mat-paginator-page-size {
			line-height: 0px;
			flex-direction: column;

			.mat-paginator-page-size-label {
				margin: 0 4px -12px 0px;
				font-size: 10px;
			}

			.mat-paginator-page-size-select {
				margin-bottom: -1.25em;
			}
		}

		.mat-paginator-range-label {
			min-width: 110px;
			font-size: 14px;
			text-align: end;
			margin: 0 0 0 8px;
		}
	}
}

.cdk-drag-handle {
	cursor: grab;
}

.mat-dialog-container {
	padding: 0px !important;
	overflow: inherit !important;
	filter: brightness(0.7);
	transition: filter 0.1s linear;
	min-width: 250px;

	&:focus, &:active, &:focus-within, &:hover, &:has(iframe) {
		filter: brightness(1);
	}

	.mat-dialog-title {
		border-radius: 3px 3px 0px 0px;
		display: flex !important;
		justify-content: space-between;
		margin: 0px;
		gap: 20px;
		align-items: center;

		> div {
			display: flex;
			align-items: center;
		}

		h3, h4, h5 {

			.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
				line-height: 34px;
			}

			align-self: center;
			margin: 0px 0px 0px 10px !important;
		}
	}

	.mat-dialog-content {
		padding: 0px !important;
		margin: 0px !important;
		max-height: 80vh;
	}

	.mat-dialog-actions {
		display: flex;
		justify-content: space-around;
		gap: 12px;
		padding: 10px;
		margin: 0px;
	}
}

.mat-menu-content .material-symbols-outlined {
	margin-right: 16px;
	vertical-align: middle;
}

.mat-list-item, .mat-menu-item, .mat-option {
	height: 42px !important;
	line-height: 42px !important;
}

.mat-autocomplete-panel, .mat-select-panel {
	max-height: 50vh !important;
}

.mat-form-field-flex {
	align-items: center !important;
}

.searchField {
	.mat-form-field-suffix {
		button {
			width: 1.5em !important;
			height: 1.5em !important;

			.material-symbols-outlined {
				font-size: 16px;
			}
		}
	}
}

.flex-spacer {
	flex: 1 1 auto;
}

.scrollDiv {
	width: 100%;
	overflow: auto;
}

app-cell::-webkit-scrollbar {
	height: 4px;
	width: 4px;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	border-left: 1px solid #444;
}

::-webkit-scrollbar-thumb {
	background: #555;
}

::-webkit-scrollbar-thumb:hover {
	background: #666;
}

::-webkit-resizer {
	border-width: 2px;
	border-style: outset;
	border-color: rgb(255 255 255 / 0%) rgb(255 255 255 / 50%) rgb(255 255 255 / 50%) rgb(255 255 255 / 0%);
	border-radius: 0px;
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}

.mat-toolbar {
	box-shadow: $bottom-shadow;

	.mat-form-field, .mat-select, .mat-slide-toggle, .mat-button-toggle-group {
		font-size: 14px !important;
	}
}

#core {
	.mat-toolbar {
		box-shadow: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}
}

.cdk-overlay-dark-backdrop {
	background-color: rgba(189, 189, 189, 0.6);
}

.goToPage {
	margin-bottom: -1.25em;
	width: 90px;

	.mat-form-field-infix {
		padding: 0.5em 0;
	}
}

pre {
	margin: 0px;
}

.mat-card {
	margin: 24px 18px;
	padding: 0px;

	&:hover {
		box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);

		.actions {
			display: block;
		}
	}

	.actions, .sub-actions {
		display: none;
		position: absolute;
		z-index: 10000;
		right: 0px;
		top: 0px;
		background-color: rgba(30, 30, 30, 0.9);
		border: transparent;
		border-bottom: 1px solid mat.get-color-from-palette($angular-accent, default);
		border-left: 1px solid mat.get-color-from-palette($angular-accent, default);
		flex-direction: column;
		border-bottom-left-radius: 4px;
		border-top-right-radius: 4px;
	}
}

.mat-cell, .mat-card .actions, .mat-card .sub-actions {

	.mat-icon-button {
		width: 32px;
		height: 32px;
		line-height: 32px;

		.material-symbols-outlined {
			font-size: 18px;
		}
	}
}

.mat-optgroup-label {
	text-align: center !important;
	border-top: 1px solid grey;
}

code, .hljs {
	font-size: 12px;
	padding: 2px 12px;
	border-radius: 4px;
	display: inline-flex;
	max-width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.25);
}

.hljs {
	tab-size: 34px;
	display: block;
	transition: box-shadow 0.1s linear;
	margin: 8px 0px;

	.hljs-ln-numbers {
		opacity: 0.2;
	}

	.hljs-ln-code {
		padding-left: 20px !important;
	}

	&:hover {
		box-shadow: 0px 0px 0px 2px mat.get-color-from-palette($angular-primary, default);

		.hljs-ln-numbers {
			opacity: 0.6;
		}
	}
}

.mat-list-single-selected-option, .mat-list-single-selected-option:hover, .mat-list-single-selected-option:focus {
	background-color: #212121;
	opacity: 1 !important;
}

ngx-monaco-editor {
	min-height: 330px;
	min-width: 350px;
	width: 40vw;
	resize: both;
	overflow: auto;
}

.editor-container {
	height: 100% !important;
}

:root {
	--ngx-json-array: #eaeaea;
	--ngx-json-object: #eaeaea;
	--ngx-json-toggler: white;
	--ngx-json-key: #2196f3;
	--ngx-json-separator: white;
	--ngx-json-value: white;

	--ngx-json-string: white;
	--ngx-json-number: white;
	--ngx-json-boolean: white;
	--ngx-json-date: white;
	--ngx-json-null: white;
	--ngx-json-undefined: white;

	--ngx-json-font-family: 'Fira Sans', sans-serif;
}

#right {
	ngx-monaco-editor {
		resize: none;
		width: 100%;
	}

	.monaco-editor {
		position: absolute !important;
	}

	.table {
		.mat-header-cell {
			color: mat.get-color-from-palette($angular-accent, default);
		}
	}

	code, .hljs {
		&:hover {
			box-shadow: 0px 0px 0px 1px mat.get-color-from-palette($angular-accent, default);
		}
	}
}

.slider {
	display: flex;
	flex-direction: column;

	> div {
		display: flex;
		justify-content: space-around;
	}

	.mat-slider {
		margin: -16px 0px;
	}
}

.hasBold {
	.mat-option:not(.bold) {
		color: grey;
	}
}

.loader {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	z-index: 10;
	width: 100%;
	background: rgba(174, 174, 174, 0.5);
}

.mat-menu-panel {
	min-height: 58px !important;
}

input[type="datetime-local"]::after {
	display: none;
}

.spaceBetweenCenter {
	flex-direction: row;
	box-sizing: border-box;
	display: flex;
	place-content: center space-between;
	align-items: center;
}

.notification {
	position: absolute;
	color: mat.get-color-from-palette($angular-primary, default);
	top: -12px;
	font-size: 18px;
	right: 0px;
}

.flexFill {
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	width: 100%;
	flex-direction: column;
	box-sizing: border-box;
	display: flex;
	place-content: stretch space-between;
	align-items: stretch;
}

@media (max-width: 1200px) {
	.mat-card {
		margin: 14px 8px;
	}

	.hideOnMobile {
		display: none !important;
	}
}
